<template>
  <el-tooltip placement="bottom" content="刷新提交记录">
        <span class="m-editor-tool-icon" @click="refresh">
          <el-icon :size="20"><refresh-left/></el-icon>
        </span>
  </el-tooltip>
  <div class="s-container">
    <el-row class="ques-head">
      <el-col :span="5">提交结果</el-col>
      <el-col :span="4">执行用时</el-col>
      <el-col :span="4">内存消耗</el-col>
      <el-col :span="4">语言</el-col>
      <el-col :span="7">提交时间</el-col>
    </el-row>
    <div v-if="records.length === 0">
      <el-empty description="暂无提交记录 "></el-empty>
    </div>
    <div v-else v-for="r in records" :key="r.id">
      <div class="ques-row" @click="$goRoute('/record/'+r.id)">
        <el-row style="display: flex;align-items: center">
          <el-col :span="5">
            <el-tag :type="getStatusTagType(r.status)">
              {{getStatusName(r.status)}}
            </el-tag>

          </el-col>
          <el-col :span="4">{{ (r.timeUsed / 1000000).toFixed(2)}}ms</el-col>
          <el-col :span="4">{{ (r.spaceUsed / 1000000).toFixed(2)}}MB</el-col>
          <el-col :span="4">
            {{getLanguageName(r.language)}}
          </el-col>
          <el-col :span="7" >
            {{ new Date(r.time * 1000).toLocaleString() }}
          </el-col>

        </el-row>
      </div>
    </div>
  </div>

</template>

<script>
import {Record} from "../../utils/http/record";
import {RefreshLeft} from "@element-plus/icons"
export default {
  name: "RecordList",
  components:{
    RefreshLeft
  },
  data : function () {
    return {
      records : []
    }
  },
  methods:{
    async refresh(){
      let resp = await Record.getAll()
      if (resp.success){
        this.records = resp.data.records.filter(r=>r.pid === parseInt(this.$route.params.proId))
      }else {
        this.$error("获取提交记录出错："+resp.message)
      }
    },
    getLanguageName(id){
      return Record.getLanguageName(id)
    },
    getStatusName(id){
      return Record.getStatusDetail(id)
    },
    getStatusTagType(id){
      return Record.getStatusTag(id);
    }
  },
  mounted() {
    this.refresh();
  }
}
</script>

<style scoped>
.s-container{
  box-sizing: border-box;
  height: calc(100vh - 92px);
  overflow-y: auto;
  font-size: 16px ;
  font-weight: normal;
}
.ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}
.ques-row{
  padding: 10px 0;
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
  border-bottom: 1px solid #eee;
  margin-top: 10px;
}
.m-editor-tool-icon{
  cursor: pointer;
  height: 25px;
  width: 25px;
  border-radius: 12.5px;
  border: 1px solid #b3d8ff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  position: absolute;
  right: 20px;
  top: 60px;
  z-index: 9;
}



</style>